import { defineComponent, onMounted, reactive } from "vue";
import { useRoute, useRouter } from "vue-router";
import styles from "./details.module.less";
import { imgPath } from "@/common/utils";
import { $getPiccInvoiceDetail } from "@/api/userCenter/applyInvoice/applyInvoice";
export default defineComponent({
  name:'userCenterinvoiceHistoryDetails',
  setup() {
    const router = useRouter();
    const route = useRoute();
    const state = reactive({
      sys_invoice_no: '',
      policy_company: '',
      title: '',
      type: '',
      address_and_phone: '',
      phone: '',
      download_type: '',
      buyer_tax_no: '',
      bank_account: '',
      create_time: '',
      url: '',
      email: '',
      fee:'',
      order_list: [],
    })


    onMounted(() => {
      $getPiccInvoiceDetail({ invoice_no: String(route.query.invoice_no) }).then((res: any) => {
        state.sys_invoice_no = res.data?.sys_invoice_no || '';
        state.policy_company = res.data?.policy_company || '';
        state.title = res.data?.title || '';
        state.type = res.data?.type.label || '';
        state.address_and_phone = res.data?.address_and_phone || '';
        state.phone = res.data?.phone || '';
        state.buyer_tax_no = res.data?.buyer_tax_no || '';
        state.bank_account = res.data?.bank_account || '';
        state.create_time = res.data?.create_time || '';
        state.url = res.data?.url || '';
        state.download_type = res.data?.download_type.label || '';
        state.email = res.data?.email || '';
        state.fee = res.data?.fee || '';
        state.order_list = res.data?.order_list || '';
        if (Number(res.data.type !== 2)) {
          state.buyer_tax_no = '';
          state.bank_account = '';
          state.address_and_phone = '';
        }
      })
    })

    return () => (
      <div class={styles.orderDetail}>
        <div class={styles['header-box']}>
          <div class={styles['title-box']}>
            <span>发票详情</span>
            <span class={styles['go-back']} onClick={() => { router.go(-1) }}>返回</span>
          </div>
          <div class={styles['btn-box']}>
            <div class={styles.btn} onClick={() => { window.location.href = state.url }}>下载电子发票</div>
          </div>
        </div>
        <div class={styles.container}>
          <div class={styles['info-box']}>
            <div class={styles['info-list']}>
              <div class={styles['list-col']}>
                <span class={styles.label}>申请流水号：</span>
                <span class={styles.value}>{state.sys_invoice_no}</span>
              </div>
              <div class={styles['list-col']}>
                <span class={styles.label}>保险公司：</span>
                <span class={styles.value}>{state.policy_company}</span>
              </div>
              <div class={styles['list-col']}>
                <span class={styles.label}>发票抬头：</span>
                <span class={styles.value}>{state.title}</span>
              </div>
              <div class={styles['list-col']}>
                <span class={styles.label}>发票类型：</span>
                <span class={styles.value}>{state.type}</span>
              </div>
              <div class={styles['list-col']}>
                <span class={styles.label}>发票获取方式：</span>
                <span class={styles.value}>{state.download_type}</span>
              </div>
              <div class={styles['list-col']}>
                <span class={styles.label}>联系人手机号：</span>
                <span class={styles.value}>{state.phone}</span>
              </div>
              <div class={styles['list-col']}>
                <span class={styles.label}>邮箱：</span>
                <span class={styles.value}>{state.email}</span>
              </div>
              <div class={styles['list-col']}>
                <span class={styles.label}>纳税人识别号：</span>
                <span class={styles.value}>{state.buyer_tax_no}</span>
              </div>
              <div class={styles['list-col']}>
                <span class={styles.label}>银行账户：</span>
                <span class={styles.value}>{state.bank_account}</span>
              </div>
              <div class={styles['list-col']}>
                <span class={styles.label}>地址和手机号：</span>
                <span class={styles.value}>{state.address_and_phone}</span>
              </div>
            </div>
            <div class={styles.line}></div>
            <div class={styles['info-list']}>
              <div class={styles['list-col']}>
                <span class={styles.label}>申请时间：</span>
                <span class={styles.value}>{state.create_time}</span>
              </div>
              <div class={styles['list-col']}>
                <span class={styles.label}>发票金额：</span>
                <span class={[styles['insure-value'], styles.active]}>￥{state.fee || 0}元</span>
              </div>
            </div>
          </div>
          <div class={styles.inventory}>
            <div class={styles.title}>
              <span>保单列表</span>
            </div>
            <div class={styles['inventory-list']}>
              <div class={styles['list-thead']}>
                <div class={styles.label}>序号</div>
                <div class={styles.label}>保单产品</div>
                <div class={styles.label}>保单号</div>
                <div class={styles.label}>投保人</div>
                <div class={styles.label}>投保日期</div>
                <div class={styles.label}>保险期间</div>
                <div class={styles.label}>保费</div>
              </div>
              <div class={styles.list}>
                {
                  state.order_list.map((item: any,index:number) => (
                    <div class={styles.item}>
                      <div class={styles.value}>{index + 1}</div>
                      <div class={styles.value}>{item.name}</div>
                      <div class={styles.value}>{item.policy_no}</div>
                      <div class={styles.value}>{item.applicant_name}</div>
                      <div class={styles.value}>{item.create_time}</div>
                      <div class={styles.value}>{item.start_date}至{item.end_date}</div>
                      <div class={styles.value}>{item.sum_premium}</div>
                    </div>
                  ))
                }
              </div>
            </div>
          </div>
        </div>
      </div>
    )
  }
})